<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>灾害信息系统登录页面</title>
<%--  登录界面的CSS修饰  --%>
    <style>
      body
      {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        background: #34495e;
      }
      .box
      {
        width: 600px;
        padding: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: #191919;
        text-align: center;
      }
      .box h1
      {
        color: white;
        text-transform: uppercase;
        font-weight: 500;
      }
      .box input[type = "text"],.box input[type = "password"]
      {
        border:0;
        background: none;
        display: block;
        margin: 20px auto;
        text-align: center;
        border: 2px solid #3498db;
        padding: 14px 10px;
        width: 200px;
        outline: none;
        color: white;
        border-radius: 24px;
        transition: 0.25s;
      }
      .box input[type = "text"]:focus,.box input[type = "password"]:focus
      {
        width: 280px;
        border-color: #2ecc71;
      }
      .box input[type = "submit"]
      {
        border:0;
        background: none;
        display: block;
        margin: 20px auto;
        text-align: center;
        border: 2px solid #2ecc71;
        padding: 14px 40px;
        outline: none;
        color: white;
        border-radius: 24px;
        transition: 0.25s;
        cursor: pointer;
      }
      .box input[type = "submit"]:hover
      {
        background: #2ecc71;
      }
      .box input[type = "radio"]:hover
      {
        background: #2ecc71;
      }
    </style>
  </head>
<%-- 登录界面的js函数，用于检查填写信息情况 --%>
  <script type="text/javascript">
      function check()
      {
          var name = document.getElementsByName("username")[0];
          var pwd = document.getElementsByName("password")[0];
          if (name.value == "")
          {
              alert("用户名不能为空");
              return false;
          }
          if (pwd.value == "")
          {
              alert("密码不能为空");
              return false;
          }
          return true;

      }
  </script>
  <body>
  <form class="box" onsubmit="return check()" action="login" method="post">
    <h1>Login</h1>
    <input type="text" name="username" placeholder="Username">
    <input type="password" name="password" placeholder="Password">
    <input type="submit" name="" value="Login">
    <a href="register">没有账号？点击注册</a>
  </form>
  </body>
</html>
